<template>
	<view>
		<view class="uni-padding-wrap">
			<view style="background:#FFF; padding:40upx;">
				<block v-if="hasLogin === true">
					<view class="uni-h3 uni-center uni-common-mt">已登录</view>
					<view class="uni-h3 uni-center uni-common-mt">{{memberId}}</view>
					<view class="uni-h3 uni-center uni-common-mt">{{md5Code}}</view>
					<view class="uni-h3 uni-center uni-common-mt">{{openId}}</view>
					<view class="uni-h3 uni-center uni-common-mt">已登录</view>
					<view class="uni-hello-text uni-center">
						<text>每个账号仅需登录 1 次，\n后续每次进入页面即可自动拉取用户信息。</text>
					</view>
				</block>
				<block v-if="hasLogin === false">
					<view class="uni-h3 uni-center uni-common-mt">未登录</view>
					<view class="uni-hello-text uni-center">
						请点击按钮登录
					</view>
				</block>
			</view>
			<view class="uni-btn-v uni- uni-common-mt">
                <button type="primary" class="page-body-button" @click="tologin('weixin')">微信登录</button>
			</view>
		</view>
	</view>
</template>


<script>
	
	
	// 用户相关 登录注册什么的
	import wxjs from "../../libs/jweixin-1.5.0.js";
	import { mapState, mapMutations} from 'vuex';
	
	let cf = {
	    h5Appid: 'wx03dcedad7b873692', // h5 appid
		h5RedirectUri: 'http://wz.syrcj.com/wx/we/oauth-callback-api', // h5 redirect_uri
	}
	export default {
		
		//store里面的值取过来
		computed: mapState(['hasLogin', 'memberId', 'md5Code','openId']),
		//mapMutations(['login']),
		
		
		/* ...mapMutations(['login']), */
		data() {
			return {
				h5Appid: 'wx03dcedad7b873692', // h5 appid
				h5RedirectUri: 'http://wz.syrcj.com/wx/we/oauth-callback-api', // h5 redirect_uri
				
				memberIdOpt: 0,
				openIdOpt: 0,
				md5CodeOpt: '',
			}
		},
		
		onLoad: function(options) {
			this.memberIdOpt = options.member_id || 0;
			this.openIdOpt = options.open_id || 0;
			this.md5CodeOpt = options.md5_code || '';
			if(this.memberIdOpt && this.openIdOpt && this.md5CodeOpt) {
				this.doLoginState();
			}else{
				this.goWxOauthLogin();
			}
		},
	
		methods: {

			goWxOauthLogin: function(){
				if (this.hasLogin) {
					uni.switchTab({
					     url: '/pages/my/index'
					});
				} else {
					this.wxH5Oauth2();	//用户去登录-跳转到授权的页面
				}
			},
			
			//执行登录的操作，写登录态
			doLoginState: function() {
				 let myData = {
					memberId: this.memberIdOpt,
					openId: this.openIdOpt,
					md5Code: this.md5CodeOpt,
				}; 
				this.login(myData);
				uni.switchTab({
				     url: '/pages/my/index'
				});
			//	uni.navigateBack()
			},
			...mapMutations(['login']),	//登录的方法


			/**
			 * 设置配置
			 * @param {JSON} config 配置参数
			 */
			setConfig(config = {}) {
			    cf = com.deepCopy(Object.assign(cf, config));
			},

			//获取配置
			getConfig(config = {}) {
			    return cf
			},
			 
			//获取用户授权并返回code
			wxH5Oauth2() {
			    location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${cf.h5Appid}&redirect_uri=${cf.h5RedirectUri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
			},
			
			/**
			 * 微信H5配置
			 * @param {String} appId 公众号的唯一标识
			 * @param {String} timestamp 生成签名的时间戳
			 * @param {String} nonceStr 生成签名的随机串
			 * @param {String} signature 签名
			 * @param {Array} jsApiList 需要使用的JS接口列表
			 */
			wxh5SetConfig(appId, timestamp, nonceStr, signature, jsApiList) {
			    wxjs.config({
			        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			        appId, // 必填，公众号的唯一标识
			        timestamp, // 必填，生成签名的时间戳
			        nonceStr, // 必填，生成签名的随机串
			        signature,// 必填，签名
			        jsApiList: com.empty(jsApiList) ?
			            [
			                'updateAppMessageShareData',
			                'updateTimelineShareData',
			                'onMenuShareTimeline',
			                'onMenuShareAppMessage',
			                'onMenuShareQQ',
			                'onMenuShareWeibo',
			                'onMenuShareQZone',
			                'startRecord',
			                'stopRecord',
			                'onVoiceRecordEnd',
			                'playVoice',
			                'pauseVoice',
			                'stopVoice',
			                'onVoicePlayEnd',
			                'uploadVoice',
			                'downloadVoice',
			                'chooseImage',
			                'previewImage',
			                'uploadImage',
			                'downloadImage',
			                'translateVoice',
			                'getNetworkType',
			                'openLocation',
			                'getLocation',
			                'hideOptionMenu',
			                'showOptionMenu',
			                'hideMenuItems',
			                'showMenuItems',
			                'hideAllNonBaseMenuItem',
			                'showAllNonBaseMenuItem',
			                'closeWindow',
			                'scanQRCode',
			                'chooseWXPay',
			                'openProductSpecificView',
			                'addCard',
			                'chooseCard',
			                'openCard'
			            ]
			            : jsApiList // 必填，需要使用的JS接口列表
			    });
			},
			
			
			/**
			 * 微信H5支付
			 * https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
			 * @param {String} url 支付地址
			 * @param {JSON} pr 参数
			 * @param {Function} sc 支付成功回调
			 * @param {Function} err 支付失败回调
			 */
			wxH5Pay(url, pr, sc, err) {
			    let that = this
			    ui.showLoading('请求支付数据', true)
			    req.post(url, pr).then(d => {
			        if (d.success) {
			            // console.log(JSON.stringify(d.data))
			            ui.showLoading('支付中', true)
			            wxjs.chooseWXPay({
			                timestamp: String(d.data.timestamp),
			                nonceStr: String(d.data.nonceStr),
			                package: String('prepay_id=' + d.data.prepayId),
			                signType: 'MD5',
			                paySign: String(d.data.paySign),
			                success: function (res) {
			                    ui.hideLoading()
			                    if (sc) {
			                        sc({ code: 1, msg: '支付成功', data: res })
			                    }
			                },
			                fail: function (er) {
			                    ui.hideLoading()
			                    if (err) {
			                        err({ code: 0, msg: '支付失败', data: er })
			                    }
			                },
			                cancel: function (er) {
			                    ui.hideLoading()
			                    if (err) {
			                        err({ code: -1, msg: '用户取消支付', data: er })
			                    }
			                }
			            });
			        } else {
			            if (err) {
			                err({ code: -2, msg: '请求支付数据失败', data: d })
			            }
			        }
			    }).catch(d => {
			        if (err) {
			            err({ code: -3, msg: '操作失败', data: d })
			        }
			    })
			}
		},
		
		
		
		
		
	    
	}
</script>
